<project-header class="top-header"></project-header>
  <project-page>

    <!-- Middle section -->
    <div class="middle-section">
      <div id="scrollable-content" class="middle-container has-scroll">
        <div class="middle-header">
          <div class="container-fluid">
            <breadcrumbs breadcrumbs="breadcrumbs"></breadcrumbs>
            <alerts alerts="alerts"></alerts>
            <div ng-if="!loaded">Loading...</div>
            <div ng-if="pod">
              <h1>
                {{pod.metadata.name}}

                <div class="pull-right dropdown">
                  <a href="" class="dropdown-toggle resource-actions-dropdown" data-toggle="dropdown"><i class="fa fa-ellipsis-v"></i><span class="sr-only">Actions</span></a>
                  <ul class="dropdown-menu actions action-button">
                    <li>
                      <edit-link
                        resource="pod"
                        kind="pods"
                        alerts="alerts">
                      </edit-link>
                    </li>
                    <li>
                      <delete-link
                        resource-type="pod"
                        resource-name="{{pod.metadata.name}}"
                        project-name="{{pod.metadata.namespace}}"
                        alerts="alerts">
                      </delete-link>
                    </li>
                  </ul>
                </div>
                <span ng-if="pod | isTroubledPod">
                  <pod-warnings pod="pod"></pod-warnings>
                </span>
                <small class="meta">created <relative-timestamp timestamp="pod.metadata.creationTimestamp"></relative-timestamp></small>
              </h1>
              <labels labels="pod.metadata.labels" clickable="true" kind="pods" project-name="{{pod.metadata.namespace}}" limit="3"></labels>
            </div>
          </div>
        </div><!-- /middle-header-->
        <div class="middle-content">
          <div class="container-fluid">
            <div class="row" ng-if="pod">
              <div class="col-md-12">
                <uib-tabset>
                  <uib-tab heading="Details" active="selectedTab.details">
                    <uib-tab-heading><!--Details-->{{'Details'| translate}}</uib-tab-heading>
                    <ng-include src=" 'views/browse/_pod-details.html' "></ng-include>
                  </uib-tab>
                  <uib-tab heading="Environment" active="selectedTab.environment">
                    <uib-tab-heading><!--Environment-->{{'Environment'| translate}}</uib-tab-heading>
                    <div ng-repeat="container in pod.spec.containers">
                      <h3><!--Container-->{{'Container'| translate}} {{container.name}}</h3>
                      <environment env-vars="container.env" ng-if="container.env.length"></environment>
                      <em ng-if="!container.env.length">The container specification has no environment variables set.</em>
                    </div>
                  </uib-tab>
                  <uib-tab ng-if="metricsAvailable" heading="Metrics" active="selectedTab.metrics">
                    <!-- Use ng-if to remove the pod-metrics directive when the tab is not active so
                         we don't update in the background. -->
                    <pod-metrics
                      ng-if="selectedTab.metrics"
                      pod="pod"
                      alerts="alerts">
                    </pod-metrics>
                  </uib-tab>

                  <uib-tab active="selectedTab.logs">
                    <uib-tab-heading><!--Logs-->{{'Logs'| translate}}</uib-tab-heading>

                    <label for="selectLogContainer"><!--Container:-->{{'Container'| translate}}</label>

                    <span ng-if="pod.spec.containers.length === 1">
                      {{pod.spec.containers[0].name}}
                    </span>

                    <select
                        id="selectLogContainer"
                        ng-if="pod.spec.containers.length > 1"
                        ng-model="logOptions.container"
                        ng-options="container.name as container.name for container in pod.spec.containers"
                        ng-init="logOptions.container = pod.spec.containers[0].name">
                    </select>

                    <log-viewer
                        ng-if="selectedTab.logs"
                        follow-affix-top="390"
                        follow-affix-bottom="90"
                        resource="pods/log"
                        name="pod.metadata.name"
                        context="projectContext"
                        options="logOptions"
                        status="pod.status.phase"
                        start="pod.status.startTime | date : 'short'"
                        run="logCanRun">
                    </log-viewer>
                  </uib-tab>

                  <uib-tab active="selectedTab.terminal"
                    select="terminalTabWasSelected = true"
                    ng-init="containers = pod.status.containerStatuses"
                    ng-if="containersRunning(pod.status.containerStatuses) > 0">
                    <uib-tab-heading>Terminal</uib-tab-heading>
                    <div>
                      <span class="pficon pficon-info" aria-hidden="true"></span>
                      When you navigate away from this pod, any processes running
                      in these terminals will quit.
                    </div>
                    <div class="pod-container-terminal"
                      ng-repeat="container in containers | orderBy:'name' track by container.name"
                      ng-if="container.state.running">
                      <h3 ng-if="containers.length > 1">{{container.name}}</h3>
                      <kubernetes-container-terminal pod="pod" container="container.name"
                        prevent="!terminalTabWasSelected">
                      </kubernetes-container-terminal>
                    </div>
    	            </uib-tab>

                  <uib-tab active="selectedTab.events">
                    <uib-tab-heading><!--Events-->{{'Events'| translate}}</uib-tab-heading>
                    <events resource-kind="Pod" resource-name="{{pod.metadata.name}}" project-context="projectContext" ng-if="selectedTab.events"></events>
                  </uib-tab>
                </uib-tabset>
              </div><!-- /col-* -->
            </div>
          </div>
        </div><!-- /middle-content -->
      </div><!-- /middle-container -->
    </div><!-- /middle-section -->
  </project-page>
